<template>
	<view class="mine">
		<!-- 头像资料展示区域 -->
		<view class="ownInfo">
			<view class="avatar"><image :src="userinfo.avatarUrl" mode=""></image></view>
			<view class="info">
				<view class="nickname">{{ userinfo.nickName }}</view>
				<view class="ancNum">主播数： {{ num }} 人</view>
				<view class="ancNum">下级人数：{{lower_level_num}} 人</view>
			</view>
		</view>
		<!-- 收益展示卡片 -->
		<view class="widthdraw">
			<view class="allmoney">
				<view>总收益（元）</view>
				<view class="all">{{ all }}</view>
			</view>
			<view class="can">
				<view>可提现（元）</view>
				<view class="could">{{ ablemoney }}</view>
			</view>
			<view class="btn"><button type="primary" size="mini" plain="true" @tap="getMoney">提现</button></view>
		</view>
		<!-- 功能列表 -->
		<view class="list">
			<ul>
				<li>
					<navigator url="../anchor/index" open-type="switchTab" hover-class="other-navigator-hover">
						<i class="tit iconfont icon-bingtu"></i>
						<text>我的主播</text>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
				<li>
					<navigator url="../downline/index" open-type="navigate" hover-class="other-navigator-hover">
						<i class="tit iconfont icon-edu-biji"></i>
						<text>下级列表</text>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
				<li>
					<navigator url="../withdraw/index" open-type="switchTab" hover-class="other-navigator-hover">
						<i class="tit iconfont icon-jilu"></i>
						<text>提现记录</text>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
				<li>
					<navigator url="../invite/index" open-type="navigate" hover-class="other-navigator-hover">
						<i class="tit iconfont icon-tianjia"></i>
						<text>邀请</text>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
				<li>
					<navigator url="javascript:void(0)" open-type="switchTab" hover-class="other-navigator-hover" @click="showContract">
						<i class="tit iconfont icon-qianhetong"></i>
						<text>合同签署</text>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
				<li>
					<navigator open-type="contact">
						<i class="tit iconfont icon-erji"></i>
						<text>我的客服</text>
						<!-- <text open-type="contact" bindcontact="handleContact" size="mini">我的客服</text> -->
						<button open-type="contact" bindcontact="handleContact" size="mini"></button>
						<i class="rig iconfont icon-iconfontyoujiantou-copy"></i>
					</navigator>
				</li>
			</ul>
		</view>
		<!-- 提现模态框 -->
		<!-- 提现模态框 -->
		<neil-modal :autoClose="true" :showCancel="false" :show="showMonmodal" @close="closeModal()" title="请输入提现金额" @confirm="withdraw()">
			<view class="input-view">
				<view class="" style="border-bottom: 0.1px solid #CCCCCC;padding:10rpx"><text>如您的提现金额超过100元，请先点击提现记录页面登记转账信息</text></view>
				<view class="moneyNum">
					<view>提现金额</view>
					<input type="digit" placeholder="请输入提现金额" v-show="showMonmodal" v-model="form.cashMoney" />
				</view>
			</view>
		</neil-modal>
		<!-- 合同签署模态框 -->
		<view class="mask" v-show="contractShow">
			<view class="contractmodal">
				<view class="tit">合同签署</view>
				<view class="info">为了保障您的合法权益，建议您前述合同之后再进行合作，合同签署请联系客服</view>
				<view class="btn"><button open-type="contact" type="default" bindcontact="handleContact">联系客服</button></view>
				<i class="iconfont icon-guanbi" @click="closecontract"></i>
			</view>
		</view>
	</view>
</template>

<script>
import neilModal from "../anchor/addAnchor/neil-modal";
import uniSection from '../withdraw/uni-section/uni-section';
export default {
	components: { uniSection ,neilModal},
	data() {
		return {
			// 微信昵称
			nickname: '',
			center: {},
			// 主播数
			num: '',
			// 总收益
			all: '',
			// 可提现金额
			ablemoney: '',
			// 提现模态框的显示隐藏
			showMonmodal: false,
			// 合同签署框的显示隐藏
			contractShow: false,
			// 用户信息
			userinfo: {},
			token: '',
			form: {
				cashMoney: ''
			},
			// 下级人数
			lower_level_num:''
		};
	},
	mounted() {
		this.getuserInfo();
		this.getMineinfo();
	},
	onShow(){
		this.getuserInfo();
		this.getMineinfo();
	},
	onShareAppMessage(res) {
		let pid = JSON.parse(uni.getStorageSync('login')).user_id;
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: '天天提现',
			path: `/pages/anchor/anchor?pid=${pid}`,
			imgUrl: 'https://ww1.yunjiexi.club/2020/03/18/GwFBk.png'
		};
	},
	methods: {
		// 展示合同签署框
		showContract() {
			this.contractShow = true;
		},
		// 关闭
		closecontract() {
			this.contractShow = false;
		},
		// 获取用户相关信息
		getMineinfo() {
			const that = this;
			this.$http({
				url: '/api/user/userCenter'
			}).then(res => {
				if (res.code == 401) {
					uni.reLaunch({
						url: '/pages/authorise/index'
					});
				}
				that.ablemoney = res.data.able_money.toFixed(2);
				that.num = res.data.anchor_num.toString();
				that.all = Number(res.data.money).toFixed(2);
				that.lower_level_num = res.data.lower_level_num
			});
		},
		getuserInfo() {
			uni.getUserInfo({
				provider: 'weixin',
				success: result => {
					this.userinfo = result.userInfo;
				},
				fail: error => {
					uni.reLaunch({
						url: '/pages/authorise/index'
					});
				}
			});
		},
		getMoney() {
			this.showMonmodal = true;
		},
		handleContact(e) {
			console.log(e.detail.path);
			console.log(e.detail.query);
		},
		closeModal() {
			this.showMonmodal = false;
		},
		// 关于模态框的函数
		withdraw() {
			const that = this;
			const cashMoney = Number(that.form.cashMoney)
			const ablemoney = Number(that.ablemoney)
			if (cashMoney <= ablemoney) {
				that.$http({
					url: '/api/user/applyWithdraw',
					method: 'POST',
					data: {
						money: that.form.cashMoney
					}
				}).then(res => {
					wx.setStorageSync('wd',true)
					if (res.code == 1) {
						uni.showToast(
							{
								title:res.msg,
								icon: 'success'
							}
						)
						this.showMonmodal = false
						// 如果提示请登录后操作，跳转到授权页
					} else if (res.code == 401) {
						uni.reLaunch({
							url: '/pages/authorise/index'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.showMonmodal = false
					}
					that.getMineinfo();
					that.form.cashMoney = '';
				});
			} else {
				uni.showToast({
					title: '超出可提现金额，请重新操作',
					icon: 'none'
				});
				this.showMonmodal = false;
			}
		}
	}
};
</script>

<style lang="scss">
.mine {
	width: 100%;
	height: 100%;
	.ownInfo {
		width: 100%;
		height: 180px;
		background: url('https://ww1.yunjiexi.club/2020/03/23/bszdU.png') no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		.avatar {
			image {
				width: 65px;
				height: 65px;
				border: 5px solid #fff;
				border-radius: 50%;
				position: absolute;
				top: 50px;
				left: 20px;
			}
		}
		.info {
			position: absolute;
			top: 50px;
			left: 110px;
			color: #ffffff;
			display: flex;
			flex-direction: column;
			.nickname {
				font-size: 18px;
				margin-bottom: 5px;
			}
			.ancNum {
				font-size: 12px;
			}
		}
	}
	.widthdraw {
		width: 90%;
		height: 100px;
		background-color: #ffffff;
		border-bottom: 1.8px solid #f4e6e6;
		border-right: 1.5px solid #f4e6e6;
		border-radius: 10px;
		margin: 0 auto;
		position: absolute;
		top: 140px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: row;
		padding-top: 20px;
		.allmoney,
		.can,
		.btn {
			width: 33%;
			padding: 10px;
			color: #6e6e6e;
			.all,
			.could {
				margin-top: 10px;
				font-weight: bolder;
				color: #000000;
				font-size: 22px;
			}
		}
		.btn {
			padding-left: 20px;
			button {
				margin-top: 15px;
				border-radius: 11111px;
			}
		}
	}
	.list {
		margin-top: 80px;
		ul {
			li {
				text-indent: 20rpx;
				width: 100%;
				font-size: 22px;
				margin-bottom: 25px;
				color: #1b1b1b;
				font-weight: normal;
				position: relative;
				.iconfont {
					vertical-align: text-bottom;
					// margin-right: 10px;
					font-size: 14px;
					// font-weight: bold;
				}
				navigator {
					height: 22px;
					line-height: 22px;
				}
				button {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: rgba(0, 0, 0, 0);
					// display: none;
					// outline: none;
				}
				button::after {
					border: none;
				}
				.tit {
					float: left;
				}
				.rig {
					float: right;
					margin-right: 20px;
				}
				text {
					font-weight: normal;
					font-size: 14px;
					font-weight: bolder;
				}
			}
		}
	}
}
.moneyNum {
	height: 80upx;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-left: 30upx;
	box-sizing: border-box;
	label{
		position: absolute;
		top: 10px;
		left: 90px;
		color: #cccccc;
	}
}
.moneyNum view {
	width: 120upx;
	height: 50upx;
	line-height: 50upx;
	font-size: 28upx;
	color: #333333;
}
.moneyNum input {
	flex: 1;
	height: 50upx;
	line-height: 50upx;
}
.neil-modal__footer-right {
	height: 60px;
}
// 合同签署模态框
.mask {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;

	.contractmodal {
		width: 70%;
		height: 400rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 250rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ffffff;
		padding: 0 20px;
		.tit {
			height: 50px;
			line-height: 50px;
			text-indent: 10px;
			font-size: 26px;
			color: blue;
		}
		.info {
			font-size: 16px;
			font-weight: bold;
			width: 100%;
			height: 110px;
			padding: 10px;
		}
		.btn {
			width: 100%;
			height: 60px;
			button {
				font-size: 13px;
				width: 80%;
				background-color: #ff0000;
				color: #ffffff;
				border-radius: 1000rpx;
			}
		}
		i {
			font-size: 22px;
			color: #ffffff;
			position: absolute;
			bottom: -40px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
